<!doctype html>
<html lang="en">
<head>
	<title>登录 | 追溯系统</title>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
	<script src="js/cos-js-sdk-v5.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    h2 {
        margin-top: 10%;
        text-align: center;
    }

    #app {
        margin-top: 30%;
    }
</style>
<body>
<h2>二维码商品追溯系统</h2>
<h2>质检信息采集</h2>
<div id="app">
	<van-form>
		<van-field v-model="username" name="用户名" label="用户名"
		           placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]"></van-field>
		<van-field v-model="password" type="password" name="密码"
		           label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]"></van-field>
		<div style="margin: 16px;">
			<van-button round block type="info" native-type="submit" @click="onSubmit">提交</van-button>
		</div>
	</van-form>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                username: '',
                password: '',
            };
        },
        methods: {
            onSubmit() {
                localStorage.clear();
                let _this = this;
                $.ajax({
                    url: "http://localhost:8082/login?username=" + _this.username + "&password=" + _this.password,
                    method: "post",
                    success: function (result) {
                        //存下token
                        localStorage.setItem("TOKEN", result.data.token);
                        window.location.href = "scan.html";
                    },
                    error: function (result) {
                        console.log(result);
                        alert("登录失败，请检查账号及密码");
                    }
                })
            },
        }
    })
</script>

</html>
